<template>
  <div class="setcolumnpage">
    <Navhead labelText="栏目管理" />
    <div class="remove same">
      <div class="func">点击删除以下频道</div>
      <div class="column">
        <div v-for="(item,index) in columnlist" :key="item.id" @click="remove(index)">{{item.name}}</div>
      </div>
    </div>
    <div class="addition same">
      <div class="func">点击添加以下频道</div>
      <div class="column">
        <div
          v-for="(item,index) in additionlist"
          :key="index"
          @click="addition(index)"
        >{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Navhead from "../components/Navhead";
export default {
  components: {
    Navhead
  },
  data() {
    return {
      columnlist: [],
      additionlist: []
    };
  },

  //   watch 两个列表, 每次有变化就放入 localStorage
  //   每次刷新载入先判断有没有旧数据, 有就无需再次发送请求
  watch: {
    columnlist() {
      console.log(this.columnlist);
      const colresult = JSON.stringify(this.columnlist);
      localStorage.setItem("columnlist", colresult);
    },
    additionlist() {
      const addresult = JSON.stringify(this.additionlist);
      localStorage.setItem("additionlist", addresult);
    }
  },
  methods: {
    //删除频道
    remove(index) {
      // 不能全删完,判断至少保留一个
      if (this.columnlist.length == 1) return;
      this.additionlist.push(this.columnlist[index]);
      this.columnlist.splice(index, 1);
    },
    // 添加频道
    addition(index) {
      this.columnlist.push(this.additionlist[index]);
      this.additionlist.splice(index, 1);
    }
  },
  mounted() {
    if (localStorage.getItem("columnlist")) {
      const toresult = localStorage.getItem("columnlist");
      this.columnlist = JSON.parse(toresult);
      const toaddresult = localStorage.getItem("additionlist");
      this.additionlist = JSON.parse(toaddresult);
      return;
    }
    this.$axios({
      url: "/category"
    }).then(res => {
      console.log(res);
      this.columnlist = res.data.data;
    });
  }
};
</script>

<style lang="less" scoped>
.setcolumnpage {
  padding: 7.222vw 4.444vw 7.222vw 5.556vw;
  .same {
    margin-bottom: 20px;
    .func {
      margin-bottom: 4px;
      font-size: 10px;
      color: #888;
    }
    .column {
      display: flex;
      flex-wrap: wrap;
      font-size: 14px;
      color: #555;
      div {
        padding: 4px 12px;
        border: 1px solid #ccc;
        margin: 10px 10px 0 0;
      }
    }
  }
}
</style>